<template>
  <div class="app-container">
     <!-- 搜索栏目 -->
    <div class="filter-container add1">
      <el-form :inline="true" :model="formQuery" class="demo-form-inline"> 
        <el-form-item label="申请号 ">
          <el-input v-model="formQuery.app_number" placeholder="申请号 "></el-input>
        </el-form-item>
         <el-form-item label="专利授权号 ">
          <el-input v-model="formQuery.pub_number" placeholder="专利授权号 "></el-input>
        </el-form-item>
         <el-form-item label="申请人/申请单位 ">
          <el-input v-model="formQuery.applicant" placeholder="申请人/申请单位 "></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="_search">
              搜索
          </el-button>
        </el-form-item>
      </el-form>
    </div>

    <el-table class="tabless" :data="list" v-loading.body="listLoading" element-loading-text="拼命加载中" border fit
              highlight-current-row :row-class-name="tableRowClassName" @sort-change='sortChange' @selection-change="handleSelectionChange">
    
      <el-table-column align="center" label="序号" width="80" fixed>
        <template slot-scope="scope">
          <span v-text="getIndex(scope.$index)"> </span>
        </template>
      </el-table-column>
      <!-- 表格主要列名称 -->
      <!-- 添加排序sortable='custom' sortable='customsss' -->
      <el-table-column align="center" prop="pub_number" label="专利授权号"  width="120px"></el-table-column>
      <el-table-column align="center" prop="app_number" label="申请号" width="120px"  ></el-table-column>
      <el-table-column align="center" prop="app_year" label="申请年" width="120px" ></el-table-column>
      <el-table-column align="center" prop="type" label="专利类型" width="120px" ></el-table-column>
      <el-table-column align="center" prop="status" label="有效状态" width="120px"  ></el-table-column>
      <el-table-column align="center" prop="applicant" label="申请人/申请单位"  width="120px" ></el-table-column>
      <el-table-column align="center" prop="source" label="数据来源"  width="120px" ></el-table-column>
      <el-table-column align="center" prop="proposer" label="提名"  width="120px" ></el-table-column>
      <el-table-column align="center" prop="cur_applicant" label="当前申请人"  width="120px" ></el-table-column>
      <el-table-column align="center" prop="title" label="专利名称"  width="120px" ></el-table-column>
      <el-table-column align="center" prop="ipc" label="IPC分类号"  width="120px" ></el-table-column>
      <el-table-column align="center" prop="app_time" label="申请时间"  width="120px" :formatter="_dateFormat"></el-table-column>
      <el-table-column align="center" prop="open_year" label="开放年"  width="120px" ></el-table-column>
      <el-table-column align="center" prop="open_time" label="开放日期"  width="120px" ></el-table-column>
      <el-table-column align="center" prop="inpa_doc" label="INPA DOC编码"  width="120px" ></el-table-column>
      <el-table-column align="center" prop="legal_status_time" label="生效时间"  width="120px" ></el-table-column>
      <el-table-column align="center" prop="inventors" label="发明人"  width="120px" ></el-table-column>
      <el-table-column align="center" prop="first_inventor" label="第一发明人"  width="120px" ></el-table-column>
      <el-table-column align="center" prop="inventors_count" label="发明人数"  width="120px" ></el-table-column>
      <el-table-column align="center" prop="applicant_count" label="申请人数"  width="120px" ></el-table-column>
      <el-table-column align="center" prop="applicant_province" label="申请省份"  width="120px" ></el-table-column>
      <el-table-column align="center" prop="inpa_doc_count" label="INPA DOC计数"  width="120px" ></el-table-column>
      <el-table-column align="center" prop="patent_count" label="专利计数"  width="120px" ></el-table-column>
      <el-table-column align="center" prop="inpa_doc_patent" label="INPA DOC编号专利"  width="120px" ></el-table-column>
      <el-table-column align="center" prop="patent_family" label="专利族"  width="120px" ></el-table-column>
      <el-table-column align="center" prop="ipc_main_number" label="INPA DOC主编号"  width="120px" ></el-table-column>
      <el-table-column align="center" prop="priority_country" label="优先级国家"  width="120px" ></el-table-column>
      <el-table-column align="center" prop="priority_number" label="优先级编号"  width="120px" ></el-table-column>
      <el-table-column align="center" prop="priority_date" label="优先级日期"  width="120px" :formatter="_dateFormat"></el-table-column>
      <el-table-column align="center" prop = "create_at"  label="创建时间" width="120px"  :formatter="_dateFormat" ></el-table-column>
       <el-table-column align="center" prop = "mark"  label="备注" width="170px"  ></el-table-column>
    </el-table>
    <!-- 以上为主界面内容 -->
    <el-pagination
      @size-change="_handleSizeChange"
      @current-change="_handleCurrentChange"
      :current-page="listQuery.pageNum" 
      :page-size="listQuery.pageRow"
      :total="totalCount"
      :page-sizes="[10, 20, 50, 100]"
      layout="total, sizes, prev, pager, next, jumper"
      class="pagination">
    </el-pagination>
  </div>
</template>
<script>

  export default {
    name: 'patent',
    data() {
      return {
        formQuery:{
          pub_number:'',
          app_number:'',
          applicant:'',
        },
        list: [],//表格的数据
        listLoading: false,//数据加载等待动画
        totalCount:0,
        listQuery: {
          pageNum: 1,//页码
          pageRow: 10,//每页条数
        },
      }
    },
    mounted() {
      this._asynsGetTableData();
    },
    methods: {
      getIndex($index) {
        //表格序号
        return (this.listQuery.pageNum - 1) * this.listQuery.pageRow + $index + 1
      },
      tableRowClassName({row, rowIndex}) {
        if (rowIndex % 2 === 1) {
          return 'warning-row';
        } else if (rowIndex % 2 === 0) {
          // return 'success-row';
        }
        return '';
      },
      sortChange(){

      },
      handleSelectionChange(){

      },
      _dateFormat(row, column, cellValue, index){
          return new Date(cellValue).Format('yyyy-MM-dd');
      },
      _handleSizeChange(val){
         this.listQuery.pageRow = val;
         this._asynsGetTableData()
      },
      _handleCurrentChange(val){
        
         this.listQuery.pageNum = val;
         console.log(this.listQuery)
         this._asynsGetTableData() 
      },
      _search(){
         // 重制页面申请条件listQuery
         this.listQuery = { pageNum: 1,pageRow: 10};
         this._asynsGetTableData();
      },
      _asynsGetTableData(){
         this.listLoading = true;
         this.api({
                    url: "/statistical/getPatentList",
                    method: "post",
                    headers:{
                      'content-type':'application/x-www-form-urlencoded'
                    },
                    data:this.$qs.stringify({
                      ...this.listQuery,
                      ...this.formQuery
                    })
            }).then(data => {
                this.listLoading = false;
                this.list = data.list;
                this.totalCount = data.totalCount;
            })
      },

    },
  }
</script>

<style lang="scss" scoped>
    .app-container{
      padding: 20px;
    }
</style>
